<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot</title>
    <style>
    	.custom{font-size: 16px;border:1px solid green;}
    	.custom p{background: rgba(255,0,0,.3);}
    </style>
</head>
<body>
    <div id="app">
		<custom>
			<div>我是 div </div>
		</custom>
    </div>
    <script src="../../2.1.8/vue.js"></script>
    <script>
	    /*
			父组件中 嵌入html 结构，默认状态是不显示的，
			所以在父组件中如果需要插入 html 结构，使用 slot

	    */
   
	    var custom = Vue.extend({
	    	template : `
	    		<div>
		    		<p>1</p>
		    		<p>2</p>
		    		<p>3</p>
	    		</div>
	    	`
	    });
	    Vue.component('custom',custom);
	    let vm = new Vue({
	    	el : '#app'
	    });
    </script>
</body>
</html>